<template>
  <a-drawer
    :width="drawerWidth"
    @close="handleCancel"
    :visible="visible"
    :confirmLoading="confirmLoading"
  >
    <template  slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
        </span>
      </div>
    </template>
    <div :style="{width: '100%',padding: '10px 16px',background: '#fff',}">

      <a-spin :spinning="confirmLoading">

        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <a-form layout="inline">
            <a-form-item label="名称" >
              <a-input autocomplete="off" readonly="readonly" v-model="model.name"></a-input>
            </a-form-item>
            <a-form-item label="默认版本" >
              <a-select v-model="model.version">
                <a-select-option v-for="item in dataSource" :value="item.version" :key="randomUUID()">
                  {{item.version}}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
                  <span  class="table-page-search-submitButtons">
                     <a-button type="primary" @click="updateVersion" >更新部署</a-button>
                    <a-button  type="primary" icon="down"  v-if="selectedRowKeys.length > 0"  @click="handleExportSelected">下载模型</a-button>
                    <a-button  type="danger" icon="delete"  v-if="selectedRowKeys.length > 0"  @click="batchDel">批量删除</a-button>
                  </span>
            </a-form-item>
          </a-form>
        </div>


        <!-- table区域-begin -->
        <div>
          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
            <a style="margin-left: 24px" @click="onClearSelected">清空</a>
          </div>
          <a-table
            ref="table"
            size="middle"
            bordered
            :rowKey="(r)=>r.id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            @change="handleTableChange">
            <span slot="ellipsis" slot-scope="text">
              <ak-ellipsis :value="text"/>
            </span>
            <span slot="diagramResourceName" slot-scope="text, r">
                <img v-if="!!text"  :large="text"
                     style="height: 50px"
                     :src="text"
                      :preview="text"/>
            </span>
            <span slot="action" slot-scope="text, record"  class="table-operator">
              <a @click="handleDelete(record.id)">删除</a>
               <a @click="handleStartProccess(record)">启动流程</a>
            </span>
          </a-table>
        </div>
        <FormModal ref="formModalRef"></FormModal>
      </a-spin>
    </div>
  </a-drawer>
</template>

<script>
    import AkfhListMixin from '../../../mixin/AkfhListMixin';
    import FormModal from './FormModal'
    import AkfhModelDrawMixin from '../../../mixin/AkfhModelDrawMixin';
    import { activitiFormUrl, activitiProcessDefinitionUrl, activitModelUrl, } from '../../../api/url'
    import {filterObj,concatUrl, randomUUID} from '../../../utils/util'
    import {appApiBaseUrl} from '../../../config/constant.config'
    import AkEllipsis from '../../../components/akfh/AkEllipsis'
    import { getAction, postAction, putAction } from '../../../api/manage'
    import qs from 'qs';
    export default {
      name: 'DefinitionList',
      components: { AkEllipsis, FormModal },
      describe:'定义模型',
        mixins:[AkfhListMixin,AkfhModelDrawMixin],
        data(){
          return {
            ipagination:false,
            columns:[
              {
                title: '#',
                dataIndex: '',
                key: 'rowIndex',
                width: 120,
                align: "center",
                customRender: function (t, r, index) {
                  return parseInt(index) + 1;
                }
              },
              {
                title: '流程名称',
                align: "center",
                dataIndex: 'key',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: '名称',
                align: "center",
                dataIndex: 'name',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: "描述",
                align: "center",
                dataIndex: 'description',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: "版本",
                align: "center",
                dataIndex: 'version',
              },
              {
                title: "挂起",
                align: "center",
                dataIndex: 'suspended_dictText',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: "图像",
                align: "center",
                dataIndex: 'diagramResourceName',
                scopedSlots: {customRender: 'diagramResourceName'},
              },

              {
                title: '操作',
                dataIndex: 'action',
                align: "center",
                scopedSlots: {customRender: 'action'},
              }
            ],
            modelId:'',
            url:activitiProcessDefinitionUrl,
            appApiBaseUrl:appApiBaseUrl,
          }

        },
        methods:{
          handleStartProccess(record){
            this.loading = true;
            getAction(activitiFormUrl.getStartFormInfo,{deploymentId:record.deploymentId})
              .then(res=>{
                if(res.success){
                  let data = res.result;
                  if(data.formKey || (data.formProperties != null && data.formProperties.length > 0)){
                    this.$refs.formModalRef.showData(data)
                  }else {
                    postAction(activitiFormUrl.startProcess+"/"+record.deploymentId)
                      .then(r=>{
                        if(r.success){
                          this.$message.success(r.message);
                        }
                      })
                  }
                }
              })
              .finally(()=>{
                this.loading = false;
              })

          },
          handleExportSelected(){
            let rowKeys = this.selectedRowKeys;
            if(!rowKeys || rowKeys.length == 0){
              this.$message.warn("请先选择行");
              return;
            }
            this.doExport(activitiProcessDefinitionUrl.exportResouce, {ids:rowKeys.join(",")});
          },
          updateVersion(){
            this.confirmLoading=true;
            putAction(activitModelUrl.updateVersion, qs.stringify({id:this.model.id, version:this.model.version}))
              .then(res=>{
                if(res.success){
                  this.$message.success(res.message);
                }
              }).finally(()=>{
                this.confirmLoading = false;
            })
          },
          randomUUID,
          // 数据填充后
          afterFullData() {
            this.loadData();
          },
          afterLoadData(res){
            let result = res.result;
            result.forEach(t=>{
              if(t.diagramResourceName){
                t.diagramResourceName = concatUrl(appApiBaseUrl, activitiProcessDefinitionUrl.resource)
                  +"?name="+t.diagramResourceName+
                  "&deploymentId="+t.deploymentId;
              }
            })
          },
          beforeLoadData(){
            return !!this.model.id;
          },
          getQueryParams() {
            return {modelId:this.model.id};
          },
          // 根据屏幕变化,设置抽屉尺寸
          resetScreenSize(){
            let screenWidth = document.body.clientWidth;
            this.drawerWidth = screenWidth;

          },
        }
    }
</script>

<style scoped>

</style>